<template>
  <form action="/">
    <van-search
      v-model="searcText"
      show-action
      placeholder="请输入搜索标签"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>
  <van-divider content-position="left">已选标签</van-divider>
  <div v-if="activeIds.length === 0">请选择标签</div>
  <van-row gutter="20" style="padding: 4px;">
    <van-col span="3" v-for="tag in activeIds">
      <van-tag closeable size="large" type="primary" @close="doClose(tag)" style="--van-tag-font-size: 10px">
        {{ tag }}
      </van-tag>
    </van-col>
  </van-row>
  <van-divider content-position="left">选择标签</van-divider>
  <van-tree-select
    v-model:active-id="activeIds"
    v-model:main-active-index="activeIndex"
    :items="taglist"
    style="height: 100%"
  >
  </van-tree-select>

  <van-button style="margin-top: 300px" block type="primary" size="large" @click="doSearchResult()">搜索</van-button>

</template>


<script setup>
import { ref } from 'vue';
import {useRouter} from "vue-router";
const route = useRouter()

const searcText = ref('');

// 原始数组
const orginTagList = [
  {
    text: '性别',
    children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
    ],
  },
  {
    text: '年级',
    children: [
      { text: '大一', id: '大一' },
      { text: '大二', id: '大二' },
      { text: '大三', id: '大三' },
      { text: '大四', id: '大四' },
    ],
  },
  {
    text: '技术',
    children: [
      { text: 'java', id: 'java' },
      { text: 'python', id: 'python' },
      { text: 'C++', id: 'C++' },
      { text: 'PHP', id: 'PHP' },
    ],
  },
];

// 点击搜索按钮跳转到搜索页面
/**
 * 这里要传递标签值
 * 1. 传值方式，通过url后面附带参数，传值参数有限
 * 2. vuex 全局状态管理
 *
 * 这里我们用第一种对，通过params参数
 */
const doSearchResult = () => {
  route.push({
    path: "/user/list",
    query: {
      tags: activeIds.value
    }
  })
}

// 搜索过滤方法,直接在前端
const onSearch = (val) => {
  // 树形嵌套接口，先每一个子项拿出来组成一个新的数组,再过滤
  // 重新开始的话应该去原始数组过滤，而不是重新拿过滤过的数组来过滤
  taglist.value = orginTagList.map(parentTag => {
          const tempChildren = [...parentTag.children]   // 拷贝一份原始数组的子项，这里可以组合成数组
          const tempParentTag = {...parentTag}          // 拷贝一份原始数组，是对象不是数组了（可以看看原数组）
          // 过滤子项
          tempParentTag.children = tempChildren.filter(item => item.text.includes(searcText.value))
          return tempParentTag
          
        })
                    
  // 发现这样写会直接改变taglist数组,改造之后是这样，首先遍历每一项，取出children，然后再过滤我们输入的标签
  // 再改造一下，发现赋值之后检测不到是一个新数组，所以这里不用forEach了直接用map返回的就是一个新数组了
};

// 搜索框的取消方法
const onCancel = () => {
  searcText.value = '';
  taglist.value = orginTagList;
};

const show = ref(true);

const activeIds = ref([]);
// 左侧选择标签索引
const activeIndex = ref(0);

// 标签列表用于过滤，响应式数据，默认等于原始数组
let taglist = ref(orginTagList);

// 箭头函数用 => 不是 ->
const doClose = (tag) => {
  activeIds.value = activeIds.value.filter(item => {
    // 要删除，就是不等于要删除的内容就保留
    return item !== tag
  })
};

</script>

<style scoped>

</style>